<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>产品新增</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基础信息</li>
            <li>图片</li>
            <li>库存库位</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="" onsubmit="return false">
                    <div class="layui-bg-gray" style="padding: 30px;">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-header">基础资料</div>
                                    <div class="layui-card-body">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">产品编号</label></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Bh" id="goods_Bh" required
                                                    lay-verify="required" placeholder="请输入输入框内容" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                            <label class="layui-form-label">产品名称</label></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Name" id="goods_Name" required
                                                    lay-verify="required" placeholder="请输入输入框内容" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                            <label class="layui-form-label">产品简称</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_JpName" id="goods_JpName" required
                                                    lay-verify="required" placeholder="请输入输入框内容" autocomplete="off"
                                                    class="layui-input">
                                            </div>

                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">产品规格</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Gg" id="goods_Gg" required
                                                    lay-verify="required" placeholder="请输入输入框内容" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                            <label class="layui-form-label">产品单位</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Unit" id="goods_Unit" required
                                                    lay-verify="required" placeholder="请输入输入框内容" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                            <label class="layui-form-label">产品分类</label>
                                            <div class="layui-input-inline">
                                                <select name="classFy_id" id="classFy_id" class="layui-input">
                                                    <option value="-1">请选择分类</option>
                                                </select>
                                                <!-- <input type="text" id="tree" lay-filter="tree" class="layui-input"> -->
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-form-text">
                                            <div class="layui-upload-drag" id="test10" style="display: none;">
                                                <i class="layui-icon"></i>
                                                <p>点击上传，或将文件拖拽到此处</p>
                                                <div class="layui-hide" id="uploadDemoView">
                                                    <hr>
                                                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                </div>
                                                <input type="hidden" name="imgPath" id="imgPath"></input>
                                            </div>
                                            <label class="layui-form-label">产品备注</label>
                                            <div class="layui-input-block">
                                                <textarea name="description" id="description" placeholder="请输入内容"
                                                    class="layui-input"></textarea>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12">
                                <div class="layui-card">
                                    <div class="layui-card-header">价格管理</div>
                                    <div class="layui-card-body">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">销售价1</label></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Price1" id="goods_Price1" required
                                                    value="0.00" lay-verify="required" placeholder="请输入输入框内容"
                                                    autocomplete="off" class="layui-input">
                                            </div>
                                            <label class="layui-form-label">销售价2</label></label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Price2" id="goods_Price2" required
                                                    value="0.00" lay-verify="required" placeholder="请输入输入框内容"
                                                    autocomplete="off" class="layui-input">
                                            </div>
                                            <label class="layui-form-label">销售价3</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="goods_Price3" id="goods_Price3" required
                                                    value="0.00" lay-verify="required" placeholder="请输入输入框内容"
                                                    autocomplete="off" class="layui-input">
                                            </div>

                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">销售限价</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="saleslimit" id="saleslimit" required
                                                    value="0.00" lay-verify="required" placeholder="请输入输入框内容"
                                                    autocomplete="off" class="layui-input">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn pear-btn-md pear-btn-primary "
                                            style="position:absolute;right:5px;bottom:5px;" lay-submit
                                            lay-filter="formDemo">立即保存</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                
                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-btn-container">
                            <button class="layui-btn demoMore" id="test1">上传A</button>
                            <button class="layui-btn demoMore" id="test2">上传B</button>
                            <button class="layui-btn demoMore" id="test3">上传C</button>
                            <button class="layui-btn demoMore" id="test4">上传D</button>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">图片1</div>
                                <div class="layui-card-body">
                                    <img style="width:100%; height:auto;" class="imgPath1" id="imgPath1"
                                        src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">图片2</div>
                                <div class="layui-card-body">
                                    <img style="width:100%; height:auto;" id="imgPath2"
                                        src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">图片3</div>
                                <div class="layui-card-body">
                                    <img style="width:100%; height:auto;" id="imgPath3"
                                        src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">图片4</div>
                                <div class="layui-card-body">
                                    <img style="width:100%; height:auto;" id="imgPath4"
                                        src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-bg-gray" style="padding: 30px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <table id="user-table" lay-filter="user-table"></table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../Script/getPingyin.js"></script>
<script>

    layui.use(['table', 'form', 'upload', 'layer', 'laydate', 'jquery', 'util', 'drawer', 'dropdown', 'popup', 'element'], function () {
        var table = layui.table,
            laydate = layui.laydate,
            form = layui.form,
            $ = layui.$,
            layer = layui.layer,
            upload = layui.upload
            , util = layui.util;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        var popup = layui.popup;
        var element = layui.element;
        var impathb = "http://localhost:5161/";
        //layer.msg(getUrlParam("flid"));
        //分类加载
        $.ajax({
            url: 'http://localhost:5161/api/ClassFy/GetClassFy',
            headers: { "Authorization": sessionStorage.getItem("token") },
            type: 'get',
            dataType: 'json',
            success: function (res) {
                // renderTable(res.data);
                res.data.sort(function (a, b) {
                    return a.id - b.id;
                })
                var html = "";
                $.each(res.data, function (index, item) {
                    html += "<option value=\"" + item.id + "\">" + item.name + "</option>"
                });
                $("#classFy_id").append(html);

                //分类赋值
                var flid = getUrlParam("flid");
                if (flid == "-1") {
                    flid = "1";
                }
                $("#classFy_id").val(flid);
                form.render('select');
                //layer.msg("33333");
            }
        })
        //查询id查询商品信息
        $.ajax({
            type: "get",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: 'http://localhost:5161/api/Goods/GetGoods?id=' + getUrlParam("id"),
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            success: function (response) {
                //alert(response.result);
                var data = response.result;
                if (response.isSuccess) {
                    $("#goods_Name").val(data.goods_Name);
                    $("#goods_JpName").val(data.goods_JpName);
                    $("#goods_Bh").val(data.goods_Bh);
                    $("#goods_Gg").val(data.goods_Gg);
                    $("#goods_Unit").val(data.goods_Unit);
                    $("#goods_Price1").val(data.goods_Price1);
                    $("#goods_Price2").val(data.goods_Price2);
                    $("#goods_Price3").val(data.goods_Price3);
                    $("#saleslimit").val(data.saleslimit);
                    $("#description").val(data.description);
                    $("#classFy_id").val(data.classFy_id);
                    // alert(impathb + data.imgPath);
                    // document.getElementById('imgPath').src="impathb + data.imgPath";
                    // $("#imgPath").attr('src',impathb + data.imgPath);
                    // $("#imgPath2").attr('src',impathb + ddata.imgPath2);
                    // $("#imgPath3").attr('src',impathb + ddata.imgPath3);
                    // $("#imgPath4").attr('src',impathb + ddata.imgPath4);
                    form.render('select');
                } else {
                    popup.failure(response.result.msg);
                }

            }
        });
        //修改
        form.on('submit(formDemo)', function (data) {
            //修改
            $.ajax({
                type: "post",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: 'http://localhost:5161/api/Goods/GoodsAdd',
                data: JSON.stringify(data.field),
                headers: {
                    "Authorization": sessionStorage.getItem("token")
                },
                success: function (response) {
                    //alert(response.result);
                    if (response.result) {
                        parent.layer.msg("新增成功!", { time: 1000, icon: 1 }, function () {
                            //重新加载父页面
                            parent.location.reload();

                        });
                    } else {
                        popup.failure("新增失败:" + data.msg);
                    }

                }
            });
            return false;
        });
        //监听文本框踢狗简拼
        $(function () {
            //输入框的值改变时触发
            $("#goods_Name").on("input", function (e) {
                //获取input输入的值
                $("#goods_JpName").val(pinyin.getCamelChars(e.delegateTarget.value));
            });
        });

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: 'http://localhost:5161/api/Goods/FileSave' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , headers: { "Authorization": sessionStorage.getItem("token") }
            , done: function (res) {
                if (res.isSuccess == true) {
                    layer.msg('上传成功');
                    $("#imgPath").val(res.result);
                    //layer.msg(res.files.file);
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "http://localhost:5161/" + res.result);
                } else {
                    layer.msg('上传失败' + res.msg);
                }

            }
        });
        // Tab 切换，以改变地址 hash 值
        element.on('tab(docDemoTabBrief)', function (data) {
            if (data.elem.context.innerText == "图片") {
                $.ajax({
                    type: "get",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    url: 'http://localhost:5161/api/Goods/GetGoods?id=' + getUrlParam("id"),
                    headers: {
                        "Authorization": sessionStorage.getItem("token")
                    },
                    success: function (response) {
                        //alert(response.result);
                        var data = response.result;
                        if (response.isSuccess) {
                            if (data.imgPath == null) $("#imgPath1").attr('src', impathb + "/Uploads/默认.jpg");
                            else $("#imgPath1").attr('src', impathb + data.imgPath);

                            if (data.imgPath2 == null) $("#imgPath2").attr('src', impathb + "/Uploads/默认.jpg");
                            else $("#imgPath2").attr('src', impathb + data.imgPath2);

                            if (data.imgPath3 == null) $("#imgPath3").attr('src', impathb + "/Uploads/默认.jpg");
                            else $("#imgPath4").attr('src', impathb + data.imgPath3);

                            if (data.imgPath2 == null) $("#imgPath4").attr('src', impathb + "/Uploads/默认.jpg");
                            else $("#imgPath4").attr('src', impathb + data.imgPath4);
                        } else {
                            popup.failure(response.result.msg);
                        }

                    }
                });
            } else if (data.elem.context.innerText == "库存库位") {
                table.render({
                    elem: '#user-table',
                    url: 'http://localhost:5161/api/Inventory/ListAll?id=' + getUrlParam("id"),
                    //page: true,
                    method: 'get', //请求方式
                    contentType: 'application/json',
                    headers: { "Authorization": sessionStorage.getItem("token") },
                    cols: [[
                        { title: '序号', type: 'numbers', align: 'center', width: 100 },
                        { title: '仓库名称', field: 'wareHouseName', align: 'center' },
                        { title: '库存数量', field: 'kcsl', align: 'right', },
                        { title: '库位', field: 'kuWei', align: 'center', edit: 'text' }
                    ]],
                    skin: 'line',

                    done: function (res, curr, count) {

                    }

                });
            }
        });
        $("#imgPath1").click(function (e) { 
            $("#imgPath1").css({'border-style':'solid','border-color':'red'});
            $("#imgPath2").css({'border-style':'none','border-color':'gray'});
            $("#imgPath3").css({'border-style':'none','border-color':'gray'});
            $("#imgPath4").css({'border-style':'none','border-color':'gray'});
        });
        $("#imgPath1").dblclick(function (e) { 
            $("#test1").trigger('click');
        });
        $("#imgPath2").click(function (e) { 
            $("#imgPath1").css({'border-style':'none','border-color':'gray'});
            $("#imgPath2").css({'border-style':'solid','border-color':'red'});
            $("#imgPath3").css({'border-style':'none','border-color':'gray'});
            $("#imgPath4").css({'border-style':'none','border-color':'gray'});
        });
        $("#imgPath2").dblclick(function (e) { 
            $("#test2").trigger('click');
        });
        $("#imgPath3").click(function (e) { 
            $("#imgPath1").css({'border-style':'none','border-color':'gray'});
            $("#imgPath2").css({'border-style':'none','border-color':'gray'});
            $("#imgPath3").css({'border-style':'solid','border-color':'red'});
            $("#imgPath4").css({'border-style':'none','border-color':'gray'});
        });
        $("#imgPath3").dblclick(function (e) { 
            $("#test3").trigger('click');
        });
        $("#imgPath4").click(function (e) { 
            $("#imgPath1").css({'border-style':'none','border-color':'gray'});
            $("#imgPath2").css({'border-style':'none','border-color':'gray'});
            $("#imgPath3").css({'border-style':'none','border-color':'gray'});
            $("#imgPath4").css({'border-style':'solid','border-color':'red'});
        });
        $("#imgPath4").dblclick(function (e) { 
            $("#test4").trigger('click');
        });
        //图片上传1
        upload.render({
            elem: '#test1',
            headers: {
                "Authorization": sessionStorage.getItem("token")
            }
            , url: 'http://localhost:5161/api/Goods/FileSave?xh=1&id=' + getUrlParam("id") //此处配置你自己的上传接口即可
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
            }
        });
        //2
        upload.render({
            elem: '#test2',
            headers: {
                "Authorization": sessionStorage.getItem("token")
            }
            , url: 'http://localhost:5161/api/Goods/FileSave?xh=2&id=' + getUrlParam("id")  //此处配置你自己的上传接口即可
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
            }
        });
        //3
        upload.render({
            elem: '#test3',
            headers: {
                "Authorization": sessionStorage.getItem("token")
            }
            , url: 'http://localhost:5161/api/Goods/FileSave?xh=3&id=' + getUrlParam("id") //此处配置你自己的上传接口即可
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
            }
        });
        //4
        upload.render({
            elem: '#test4',
            headers: {
                "Authorization": sessionStorage.getItem("token")
            }
            , url: 'http://localhost:5161/api/Goods/FileSave?xh=4&id=' + getUrlParam("id") //此处配置你自己的上传接口即可
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
            }
        });
        // 库位单元格编辑后的事件
        table.on('edit(user-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
            $.ajax({
                type: "put",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: 'http://localhost:5161/api/Inventory/UpdateKw',
                data: JSON.stringify(data),
                headers: {
                    "Authorization": sessionStorage.getItem("token")
                },
                success: function (response) {
                    if (response.result) {
                        popup.success("修改成功");
                    } else {
                        popup.failure("修改失败:" + data.msg);
                    }
                }
            });
        });


    });
</script>